<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Mail | 邮箱登录</title>
	<link rel="stylesheet" type="text/css" href="./css/c.css?family=RobotoDraft:300,500">
	<link rel="stylesheet" type="text/css" href="./css/default.css">
	<link rel="stylesheet" type="text/css" href="./css/account.css" />
	<!--[if IE]>
		<script src="./js/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<div class="login">

			<div class="photo">
			</div>
			<span>Mail</span>
			<form id="login-form" name="form1" action="https://exmail.qq.com/cgi-bin/login" method="post" onsubmit="return checkInput()">
				<input type="hidden" name="firstlogin" value="false">
				<input type="hidden" name="errtemplate" value="dm_loginpage">
				<input type="hidden" name="aliastype" value="other">
				<input type="hidden" name="dmtype" value="bizmail">
				<input type="hidden" name="p" value="">
				<div id="u" class="form-group">
				  
				  <input id="uin" spellcheck=false class="form-control" name="uin" type="text" size="18" alt="login" required="">
				  <span class="form-highlight"></span>
				  <span class="form-bar"></span>
				  <label class="float-label" style="left: 70%;top: 10px;font-size: 16px;">@ilkhome.cn</label>
				  <input type="hidden" name="domain" value="ilkhome.cn">
				  <label for="uin" class="float-label">用户名</label>
				  <erroru>
				  	用户名不能为空
				  	<i>		
						    <path d="M0 0h24v24h-24z" fill="none"/>
						    <path d="M1 21h22l-11-19-11 19zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
						</svg>
				  	</i>
				  </erroru>
				</div>
				<div id="p" class="form-group">
				  <input id="pw" class="form-control" spellcheck=false name="pwd" type="password" size="18" alt="login" required="">
				  <span class="form-highlight"></span>
				  <span class="form-bar"></span>
				  <label for="pw" class="float-label">密码</label>

				  <errorp>
				  	密码不能为空
				  	<i>		
						    <path d="M0 0h24v24h-24z" fill="none"/>
						    <path d="M1 21h22l-11-19-11 19zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
						</svg>
				  	</i>
				  </errorp>
				</div>
				<div class="form-group">
				<input type="checkbox" id="rem">
				<label for="rem">记住密码</label>
				<button id="submit" type="submit" ripple>登录</button>
				</div>
			</form>
		</div>
	</div>
	
	<script src='js/jquery.min.js'></script>
	<script>
	$(document).ready(function () {
	    $(function () {
	        var animationLibrary = 'animate';
	        $.easing.easeOutQuart = function (x, t, b, c, d) {
	            return -c * ((t = t / d - 1) * t * t * t - 1) + b;
	        };
	        $('[ripple]:not([disabled],.disabled)').on('mousedown', function (e) {
	            var button = $(this);
	            var touch = $('<touch><touch/>');
	            var size = button.outerWidth() * 1.8;
	            var complete = false;
	            $(document).on('mouseup', function () {
	                var a = { 'opacity': '0' };
	                if (complete === true) {
	                    size = size * 1.33;
	                    $.extend(a, {
	                        'height': size + 'px',
	                        'width': size + 'px',
	                        'margin-top': -size / 2 + 'px',
	                        'margin-left': -size / 2 + 'px'
	                    });
	                }
	                touch[animationLibrary](a, {
	                    duration: 500,
	                    complete: function () {
	                        touch.remove();
	                    },
	                    easing: 'swing'
	                });
	            });
	            touch.addClass('touch').css({
	                'position': 'absolute',
	                'top': e.pageY - button.offset().top + 'px',
	                'left': e.pageX - button.offset().left + 'px',
	                'width': '0',
	                'height': '0'
	            });
	            button.get(0).appendChild(touch.get(0));
	            touch[animationLibrary]({
	                'height': size + 'px',
	                'width': size + 'px',
	                'margin-top': -size / 2 + 'px',
	                'margin-left': -size / 2 + 'px'
	            }, {
	                queue: false,
	                duration: 500,
	                'easing': 'easeOutQuart',
	                'complete': function () {
	                    complete = true;
	                }
	            });
	        });
	    });
	    var uin = $('#uin'), pw = $('#pw'), erroru = $('erroru'), errorp = $('errorp'), submit = $('#submit'), udiv = $('#u'), pdiv = $('#p');
	    uin.blur(function () {
	        if (uin.val() == '') {
	            udiv.attr('errr', '');
	        } else {
	            udiv.removeAttr('errr');
	        }
	    });
	    pw.blur(function () {
	        if (pw.val() == '') {
	            pdiv.attr('errr', '');
	        } else {
	            pdiv.removeAttr('errr');
	        }
	    });
	});
	</script>
</body>
</html>